import React, { useState } from "react";
import {
  Card,
  Typography,
  Space,
  Row,
  Col,
  Input,
  Select,
  Switch,
  Divider,
  Slider,
  Radio,
} from "antd";
// 使用动态导入来解决可能的 ChromePicker 导入问题
const ChromePickerComponent = React.lazy(() =>
  import("react-color").then((mod) => ({ default: mod.ChromePicker }))
);
import UserAvatar from "../components/UserAvatar";
import Icon from "../utils/icons";

const { Title, Paragraph } = Typography;
const { Option } = Select;

const UserAvatarDemo: React.FC = () => {
  const [name, setName] = useState("张三");
  const [size, setSize] = useState<any>("default");
  const [shape, setShape] = useState<"circle" | "square">("circle");
  const [textColor, setTextColor] = useState("#ffffff");
  const [useAbbreviation, setUseAbbreviation] = useState(false);
  const [showColorPicker, setShowColorPicker] = useState(false);
  const [customColor, setCustomColor] = useState("#1677ff");
  const [useCustomColors, setUseCustomColors] = useState(false);

  // 预设颜色方案
  const colorSchemes = {
    default: [
      "#1677ff",
      "#52c41a",
      "#fa8c16",
      "#eb2f96",
      "#722ed1",
      "#13c2c2",
      "#faad14",
      "#f5222d",
    ],
    pastel: [
      "#BDCDD6",
      "#ECC9EE",
      "#9ED2BE",
      "#FFDAAF",
      "#AEBDCA",
      "#DFCCFB",
      "#FAD3E7",
      "#CDF0EA",
    ],
    dark: [
      "#0F172A",
      "#374151",
      "#4B5563",
      "#1E293B",
      "#111827",
      "#2A3342",
      "#14532D",
      "#450A0A",
    ],
    vivid: [
      "#FF0000",
      "#FF7F00",
      "#FFFF00",
      "#00FF00",
      "#0000FF",
      "#4B0082",
      "#9400D3",
      "#FF1493",
    ],
  };

  const [selectedColorScheme, setSelectedColorScheme] =
    useState<keyof typeof colorSchemes>("default");

  // 示例名称列表
  const exampleNames = [
    "张三",
    "李四",
    "王五",
    "John Smith",
    "赵云",
    "Maria Garcia",
    "黄柳",
    "David Johnson",
  ];

  // 自定义尺寸
  const [customSize, setCustomSize] = useState(40);

  // 更新颜色选择器处理逻辑
  const handleColorChange = (color: any) => {
    setCustomColor(color.hex);
  };

  // 渲染颜色方案卡片
  const renderColorSchemeCards = () => {
    return (
      <div className="color-scheme-cards">
        <Radio.Group
          value={selectedColorScheme}
          onChange={(e) => setSelectedColorScheme(e.target.value)}
          style={{ width: "100%" }}
        >
          {Object.entries(colorSchemes).map(([key, colors]) => (
            <div key={key} style={{ marginBottom: "16px" }}>
              <Radio value={key} style={{ width: "100%" }}>
                <Card
                  size="small"
                  style={{
                    width: "100%",
                    borderColor:
                      selectedColorScheme === key ? "#1677ff" : "#d9d9d9",
                    boxShadow:
                      selectedColorScheme === key
                        ? "0 0 0 2px rgba(24, 144, 255, 0.2)"
                        : "none",
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                    }}
                  >
                    <span style={{ textTransform: "capitalize" }}>{key}</span>
                    <div style={{ display: "flex", gap: "4px" }}>
                      {colors.map((color, index) => (
                        <div
                          key={index}
                          style={{
                            width: "16px",
                            height: "16px",
                            borderRadius: "4px",
                            backgroundColor: color,
                          }}
                        />
                      ))}
                    </div>
                  </div>
                </Card>
              </Radio>
            </div>
          ))}
        </Radio.Group>
      </div>
    );
  };

  return (
    <div style={{ padding: "24px" }}>
      <Title level={2}>用户头像组件</Title>
      <Paragraph>
        基于用户名动态生成头像，显示用户名称的缩写或最后一个字符。头像颜色根据用户名自动确定，也可自定义。
      </Paragraph>

      <Row gutter={[24, 24]}>
        <Col xs={24} lg={12}>
          <Card title="配置预览">
            <Space direction="vertical" style={{ width: "100%" }}>
              <div style={{ marginBottom: "24px", textAlign: "center" }}>
                <UserAvatar
                  name={name}
                  size={typeof size === "string" ? size : customSize}
                  shape={shape}
                  colors={
                    useCustomColors
                      ? customColor
                      : colorSchemes[selectedColorScheme]
                  }
                  textColor={textColor}
                  useAbbreviation={useAbbreviation}
                  style={{ margin: "0 auto" }}
                />
              </div>

              <Space direction="vertical" style={{ width: "100%" }}>
                <div>
                  <div style={{ marginBottom: "8px" }}>用户名</div>
                  <Input
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder="输入用户名"
                    style={{ width: "100%" }}
                  />
                </div>

                <div>
                  <div style={{ marginBottom: "8px" }}>头像大小</div>
                  <Select
                    style={{ width: "100%" }}
                    value={size}
                    onChange={(value) => setSize(value)}
                  >
                    <Option value="small">小 (24px)</Option>
                    <Option value="default">默认 (40px)</Option>
                    <Option value="large">大 (60px)</Option>
                    <Option value="custom">自定义</Option>
                  </Select>

                  {size === "custom" && (
                    <div style={{ marginTop: "12px" }}>
                      <Slider
                        min={20}
                        max={100}
                        value={customSize}
                        onChange={(value) => setCustomSize(value as number)}
                      />
                      <div style={{ textAlign: "center" }}>{customSize}px</div>
                    </div>
                  )}
                </div>

                <div>
                  <div style={{ marginBottom: "8px" }}>头像形状</div>
                  <Select
                    style={{ width: "100%" }}
                    value={shape}
                    onChange={(value: "circle" | "square") => setShape(value)}
                  >
                    <Option value="circle">圆形</Option>
                    <Option value="square">方形</Option>
                  </Select>
                </div>

                <div>
                  <div style={{ marginBottom: "8px" }}>字符类型</div>
                  <Switch
                    checked={useAbbreviation}
                    onChange={setUseAbbreviation}
                    checkedChildren="姓名缩写"
                    unCheckedChildren="最后一个字符"
                  />
                </div>
              </Space>
            </Space>
          </Card>
        </Col>

        <Col xs={24} lg={12}>
          <Card title="颜色配置">
            <Space direction="vertical" style={{ width: "100%" }}>
              <div>
                <div style={{ marginBottom: "8px" }}>使用自定义颜色</div>
                <Switch
                  checked={useCustomColors}
                  onChange={setUseCustomColors}
                />
              </div>

              {!useCustomColors && (
                <div>
                  <div style={{ marginBottom: "8px" }}>预设颜色方案</div>
                  {renderColorSchemeCards()}
                </div>
              )}

              {useCustomColors && (
                <div>
                  <div style={{ marginBottom: "8px" }}>选择单一颜色</div>
                  <div
                    style={{
                      padding: "6px",
                      background: "#fff",
                      borderRadius: "1px",
                      boxShadow: "0 0 0 1px rgba(0,0,0,.1)",
                      display: "inline-block",
                      cursor: "pointer",
                    }}
                    onClick={() => setShowColorPicker(!showColorPicker)}
                  >
                    <div
                      style={{
                        width: "36px",
                        height: "14px",
                        borderRadius: "2px",
                        background: customColor || "#1677ff",
                      }}
                    />
                  </div>
                  {showColorPicker && (
                    <div style={{ position: "absolute", zIndex: 2 }}>
                      <div
                        style={{
                          position: "fixed",
                          top: "0px",
                          right: "0px",
                          bottom: "0px",
                          left: "0px",
                        }}
                        onClick={() => setShowColorPicker(false)}
                      />
                      <React.Suspense fallback={<div>加载颜色选择器...</div>}>
                        <ChromePickerComponent
                          color={customColor}
                          onChange={handleColorChange}
                        />
                      </React.Suspense>
                    </div>
                  )}
                </div>
              )}

              <div>
                <div style={{ marginBottom: "8px" }}>文字颜色</div>
                <div
                  style={{
                    padding: "6px",
                    background: "#fff",
                    borderRadius: "1px",
                    boxShadow: "0 0 0 1px rgba(0,0,0,.1)",
                    display: "inline-block",
                    cursor: "pointer",
                  }}
                  onClick={() => setShowColorPicker(!showColorPicker)}
                >
                  <div
                    style={{
                      width: "36px",
                      height: "14px",
                      borderRadius: "2px",
                      background: textColor,
                    }}
                  />
                </div>
                <Input
                  value={textColor}
                  onChange={(e) => setTextColor(e.target.value)}
                  placeholder="#ffffff"
                  style={{ width: "120px", marginLeft: "8px" }}
                />
              </div>
            </Space>
          </Card>
        </Col>
      </Row>

      <Card title="示例展示" style={{ marginTop: "24px" }}>
        <Row gutter={[16, 16]}>
          {exampleNames.map((exampleName, index) => (
            <Col key={index} xs={12} sm={8} md={6} lg={3}>
              <div style={{ textAlign: "center" }}>
                <UserAvatar
                  name={exampleName}
                  size="large"
                  colors={
                    useCustomColors
                      ? customColor
                      : colorSchemes[selectedColorScheme]
                  }
                  textColor={textColor}
                  useAbbreviation={useAbbreviation}
                />
                <div style={{ marginTop: "8px" }}>{exampleName}</div>
              </div>
            </Col>
          ))}
        </Row>
      </Card>

      <Card title="使用说明" style={{ marginTop: "24px" }}>
        <Divider orientation="left">基本用法</Divider>
        <pre
          style={{
            background: "#f5f5f5",
            padding: "16px",
            borderRadius: "4px",
          }}
        >
          {`import UserAvatar from '@/components/UserAvatar';

// 基本用法
<UserAvatar name="张三" />

// 自定义大小和形状
<UserAvatar name="张三" size={50} shape="square" />

// 使用姓名缩写
<UserAvatar name="张三" useAbbreviation={true} />

// 自定义颜色
<UserAvatar 
  name="张三" 
  colors={['#1677ff', '#52c41a', '#fa8c16']} 
  textColor="#fff" 
/>`}
        </pre>

        <Divider orientation="left">API</Divider>
        <pre
          style={{
            background: "#f5f5f5",
            padding: "16px",
            borderRadius: "4px",
          }}
        >
          {`UserAvatarProps {
  name: string;              // 用户名
  size?: number | 'small' | 'default' | 'large';  // 尺寸
  shape?: 'circle' | 'square';  // 形状
  colors?: string[] | string;  // 背景色
  textColor?: string;       // 文字颜色
  useAbbreviation?: boolean;  // 是否使用姓名缩写
  className?: string;       // 自定义类名
  style?: React.CSSProperties;  // 自定义样式
  onClick?: Function;       // 点击事件
}`}
        </pre>
      </Card>
    </div>
  );
};

export default UserAvatarDemo;
